<template>
  <view class="foods-detail">
    <u-popup
      v-model="show"
      mode="center"
      width="90%"
      height="70%"
      border-radius="20"
      :closeable="true"
      :duration="0"
    >
      <view class="poup">
        <view class="good-list">
          <scroll-view
            scroll-y="true"
            style="height:100%"
            class="scroll-Y"
          >
            <!-- 商品图片 -->
            <u-swiper
              :list="goodsList"
              :height="440"
              indicator-pos="bottomRight"
            ></u-swiper>

            <!-- 商品名称 -->
            <view class="goods">
              <view class="goods-name u-line-1">{{ goodsKindInfo.title }}</view>
            </view>
            <view class="kinds">规格</view>

            <view
              v-for="(item, index) in goodsKindInfo.items"
              :key="index"
              class="kind-item"
            >
              <view class="foods-name">{{ item.title }}</view>
              <view class="goods-stock">库存：{{ item.storage }}</view>
              <!-- 商品价格 -->
              <view class="price">
                <view class="true-price">
                  <view>￥{{ item.price }}</view>
                  <view>￥{{ item.market_price }}</view>
                </view>
                <view class="buy-num">
                  <view
                    class="iconfont icon-jian jian"
                    @click="reduceBuyCount(item, index)"
                  ></view>
                  <view class="num">{{ goodsInfo[index].number }}</view>
                  <view
                    class="iconfont icon-add-fill jia"
                    @click="addByCount(item, index)"
                  ></view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="buy">
          <u-button :custom-style="customStyle" :ripple="true" @click="addCar"
            >加入购物车</u-button
          >
        </view>
      </view>
    </u-popup>
    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import { jugeIsLogin } from "@/common/utils";
export default {
  data() {
    return {
      show: false,
      customStyle: {
        color: "#FFFFFF",
        backgroundColor: "#D65C45",
      },
      goodsKindInfo: {}, //商品信息
      goodsList: [
        "http://maomi-shop-resource-hz.oss-cn-hangzhou.aliyuncs.com/87e16336f0cb58113cfedff2e9c05bff.jpg",
      ],
      //商品信息
      goodsInfo: [],
    };
  },
  methods: {
    /**
     * 减少购买数量
     */
    reduceBuyCount(item, index) {
      // 判断是否登陆
      if (!jugeIsLogin()) {
        return;
      }
      // 减少库存
      if (this.goodsInfo[index].number >= 1) {
        this.goodsInfo[index].number -= 1;
      }
    },

    /**
     * 增加购买数量
     */
    addByCount(item, index) {
      // 判断是否登陆
      if (!jugeIsLogin()) {
        return;
      }
      // 判断库存是否够
      if (item.storage > this.goodsInfo[index].number) {
        this.goodsInfo[index].number += 1;
      } else {
        this.$u.toast("超出库存");
      }
    },

    /**
     * 就加入购物车
     */
    addCar() {
      // 数组合并
      // this.$parent.buy_car.push.apply(this.$parent.buy_car, this.goodsInfo);

      var isExitGoodsItemIds = [];
      // 替换掉存在的规格商品 购买数量
      this.goodsInfo.map((v) => {
        this.$parent.buy_car.forEach((element, index) => {
          // 是否存在购物车
          if (v.goods_item_id === element.goods_item_id) {
            // 存在 替换以前的购买数量
            this.$parent.buy_car[index].number = v.number;
            // 存入 已经存在的商品
            isExitGoodsItemIds.push(v.goods_item_id);
          }
        });
      });
      // 增加 不存在的规格
      this.goodsInfo.map((v) => {
        if (!isExitGoodsItemIds.includes(v.goods_item_id) && v.number != 0) {
          this.$parent.buy_car.push(v);
        }
      });

      // 总订单数
      this.$parent.carCount = 0;
      this.$parent.buy_car.map((v) => {
        this.$parent.carCount += v.number;
      });
      this.show = false;
      this.$refs.uTips.show({
        title: "添加成功",
        type: "success",
        duration: "2300",
      });

      console.log(this.$parent.buy_car);
    },
  },
  onLoad(option) {},
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.foods-detail {
  .poup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .good-list {
      flex: 1;
      overflow: hidden;
      overflow-y: scroll;
      .goods {
        padding: 30rpx 36rpx 10rpx 36rpx;
        /* border-bottom: 1rpx solid #e6e6e6; */
        .goods-name {
          color: #333333;
          font-size: 30rpx;
          font-weight: bold;
        }
      }
      .kinds {
        margin: 20rpx 40rpx;
      }
      .kind-item {
        margin-top: 20rpx;
        .foods-name {
          margin-left: 40rpx;
          color: #333333;
          font-size: 30rpx;
        }
        .goods-stock {
          color: #333333;
          font-size: 24rpx;
          margin-top: 10rpx;
          margin-left: 40rpx;
        }

        .price {
          @include flex-row;
          padding: 10rpx 36rpx 30rpx 36rpx;
          border-bottom: 1rpx solid #e6e6e6;
          .true-price {
            @include flex-row;
            & > view:nth-child(1) {
              color: #d65c45;
              font-size: 32rpx;
              font-weight: bold;
              margin-right: 10rpx;
            }
            & > view:nth-child(2) {
              color: #999999;
              font-size: 24rpx;
              text-decoration: line-through;
            }
          }
          .buy-num {
            @include flex-row;
            .jian {
              color: #dcdcdc;
              font-size: 48rpx;
              margin-right: 20rpx;
            }
            .jia {
              color: #d65c45;
              font-size: 50rpx;
              margin-left: 20rpx;
            }
            .num {
              color: #333333;
              font-size: 28rpx;
              font-weight: bold;
            }
          }
        }
      }
    }
    .buy {
      position: relative;
      bottom: 0;
      margin: 20rpx;
    }
  }
}
</style>
